<template>
  <div class="q-pa-md column followed">
    <div class="row items-center justify-between q-mb-md">
      <div class="title">{{ $t('home.followedTitle') }}</div>
      <q-select
        square
        outlined
        dense
        v-model="currentFilter"
        :options="filters"
        color="accent"
        hide-bottom-space
      />
    </div>
    <div
      class="time-group fit"
      v-for="(videos, index) in timeGroup"
      :key="index"
    >
      <template v-if="videos.length > 0">
        <div class="q-mb-md">{{ timeLabel[index] }}</div>
        <div class="grid-video-container q-mb-md">
          <video-card
            :ratio="0.82"
            v-for="video in videos"
            :key="video.id"
            :video="video"
          />
        </div>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import { onBeforeMount, computed, ref } from 'vue';
import Video from 'src/models/Video';
import VideoCard from 'components/video/SmallVideoCard.vue';
import { groupByTime } from 'src/utils/common';
import { useVideoStore } from 'src/stores/video-store';

const videoStore = useVideoStore();
const timeGroup = computed<Array<Video[]>>(() =>
  groupByTime(videoStore.followedVideos)
);
onBeforeMount(async () => {
  await videoStore.getVideoByFollowed();
});
const filters = ref(['Newest', 'Oldest']);
const currentFilter = ref('Newest');
const timeLabel = ref(['This Week', 'This Month', 'Earlier']);
</script>
<style lang="sass" scoped>

.followed
  max-width: 1450px
  min-width: 960px
  width: 100%
  .title
    font-size: 22px
</style>
